<template>
  <div class="content">
    <!-- 评论区 -->
    <div class="comments_box">
      <template>
        <div
          class="father"
          v-for="(item, index) in commentsList"
          :key="item.cid"
        >
          <div class="header">
            <div class="avatar" @click="toUserInfo(item)">
              <el-avatar :src="item.avatar"></el-avatar>
            </div>
            <div class="username_message">
              <div class="username" @click="toUserInfo(item)">
                {{ item.nickname }}
              </div>
              <div class="comments_content" @click="sendSonComment(item)">
                {{ item.content }}
              </div>
              <div class="time">
                {{ item.date }}
                <span style="margin-left: 8px" @click="sendSonComment(item)"
                  >回复</span
                >
                <el-link
                  v-if="item.uid == userInfo.uid"
                  type="primary"
                  style="margin-left: 5px; font-size: 10px; margin-top: -2px"
                  @click="deletComment(item, index)"
                  >删除</el-link
                >
              </div>
            </div>
            <div class="zan" @click="kudosComment(item)">
              <i
                class="iconfont"
                :style="
                  item.mark == 0
                    ? 'font-size: 20px; margin-left: 140px; margin-top: 5px'
                    : 'font-size: 20px;color:#0074e8; margin-left: 140px; margin-top: 5px'
                "
                >&#xe68e;</i
              ><span v-if="item.likes != 0">{{ item.likes }}</span>
            </div>
          </div>

          <template v-if="item.sonComments">
            <div
              class="son"
              v-for="(item2, index2) in item.sonComments"
              :key="item2.cid"
            >
              <div class="avatar" @click="toUserInfo(item2)">
                <el-avatar :src="item2.avatar"></el-avatar>
              </div>
              <div class="username_message">
                <div class="username" @click="toUserInfo(item2)">
                  {{ item2.nickname }}
                </div>
                <div class="comments_content">
                  <template>
                    <div @click="sendSonComment(item2)">
                      <span style="color: #9b9b9b; font-size: 12px">回复</span
                      ><span class="username">{{ item2.whoNickname }}</span
                      >：<span>{{ item2.content }}</span>
                    </div>
                  </template>
                  <!-- <template >
                    <div class="comments_content">{{ item2.content }}</div>
                  </template> -->
                </div>
                <div class="time">
                  {{ item2.date }} <span style="margin-left: 15px">回复</span>
                  <el-link
                    v-if="item2.uid == userInfo.uid"
                    type="primary"
                    style="margin-left: 5px; font-size: 10px; margin-top: -2px"
                    @click="deletComment(item2, index, index2)"
                    >删除</el-link
                  >
                </div>
              </div>
              <div class="zan" @click="kudosComment(item2)">
                <i
                  class="iconfont"
                  :style="
                    item2.mark == 0
                      ? 'font-size: 20px; margin-left: 100px; margin-top: 5px'
                      : 'font-size: 20px;color:#0074e8; margin-left: 100px; margin-top: 5px'
                  "
                  >&#xe68e;</i
                ><span v-if="item2.likes != 0">{{ item2.likes }}</span>
              </div>
            </div>
            <div
              v-if="item.comments > 5"
              style="
                font-size: 12px;
                color: #9b9b9b;
                margin-left: 67px;
                margin-top: 3px;
                cursor: pointer;
              "
              @click="getMoreSonComments(item, index, $event)"
            >
              展开更多评论<i class="el-icon-arrow-down"></i>
            </div>
          </template>
        </div>
      </template>
    </div>
    <!-- 发评论 -->
    <div class="comment_content">
      <div class="comment_input">
        <template>
          <input
            v-model="editComment"
            :placeholder="placeholder"
            @focus="getInput"
            @change="changeInput"
            ref="inputValF"
          />
        </template>
        <el-button
          type="primary"
          size="mini"
          style="margin-left: 10px"
          @click="sendComment"
          >发送</el-button
        >
      </div>
    </div>
  </div>
</template>

<script>
import { mapState } from "vuex";
export default {
  name: "mini_comments",
  props: ["message", "userInfo"],
  data() {
    return {
      commentsList: [],
      flag: false,
      editComment: "",
      // editCommentS: "",
      isFather: true,
      param: {},
      // paramFather: {},
      // paramSon: {},
      placeholder: "",

      // fatherFlag: false,
      // sonFlag: false,
      // disabled: true,
    };
  },
  computed: {
    ...mapState({
      myInfo: (state) => state.userInfo.userInfo,
      avatar_url() {
        return;
      },
    }),
  },
  methods: {
    // 获取评论
    async getAllComments() {
      let result = await this.$API.reqGetAllComments(
        this.message.mid,
        this.userInfo.uid
      );
      if (result.code == 2000) {
        this.commentsList = result.data.map((item) => {
          item.avatar = "http://cdn.gdxywsw.club/" + item.avatar;
          if (item.sonComments) {
            item.sonComments.map((item2) => {
              item2.avatar = "http://cdn.gdxywsw.club/" + item2.avatar;
              return item2;
            });
          }
          return item;
        });
      }
    },
    //点赞评论
    async kudosComment(comment) {
      const { id, mark } = comment;
      console.log(comment);
      if (mark == 0) {
        let result = await this.$API.reqKudosComment(id);
        if (result.code == 2000) {
          console.log("赞");
        }
      } else {
        let result = await this.$API.reqCancelKudosComment(id);
        if (result.code === 2000) {
          console.log("no赞");
        }
      }
      this.getAllComments();
    },
    // // 删除评论父级
    // async deleteFatherComment(item, index) {
    //   let result = await this.$API.reqDeleteFatherComment(item.id);
    //   if (result.code == 2000) {
    //     this.commentsList.splice(index, 1);
    //   }
    // },
    // // 删除评论子级
    // async deleteSonComment(item, index, index2) {
    //   let result = await this.$API.reqDeleteSonComment(item.id);
    //   if (result.code == 2000) {
    //     this.commentsList[index].sonComments.splice(index2, 1);
    //   }
    // },

    // 失败

    //调出父级回复框
    /*
    // goComment() {
    //   this.flag = true;
    //   this.fatherFlag = true;
    //   this.$nextTick(() => {
    //     this.$refs.inputValF.focus();
    //   });

    //   console.log("focus");
    // },
    */

    //  删评论
    async deletComment(item, index, index2) {
      let result = await this.$API.reqDeleteComment(item.id);
      if (result.code == 2000) {
        if (item.parentId == "0") {
          this.commentsList.splice(index, 1);
        } else {
          this.commentsList[index].sonComments.splice(index2, 1);
        }
      }
    },

    //查看该父级所有子评论
    async getMoreSonComments(item, index, e) {
      let result = await this.$API.reqGetAllSonComments(
        item.id,
        this.myInfo.uid
      );
      if (result.code == 2000) {
        this.commentsList[index].sonComments = result.data.map((item) => {
          item.avatar = "http://cdn.gdxywsw.club/" + item.avatar;
          return item;
        });
        e.target.style.display = "none";
        console.log(e.target.style);
      }
    },

    // 准备父级回复参数
    sendFatherComment() {
      this.editComment = "";
      this.isFather = true;
      let mid = this.message.mid;
      let parentId = "0";
      this.param = {
        mid,
        parentId,
        content: this.editCommentF,
        who: "",
      };

      this.$refs.inputValF.focus();
      this.placeholder = "说点什么吧";
    },
    // 准备子级回复参数
    sendSonComment(item) {
      console.log(item, "00000");
      this.editComment = "";
      let mid = this.message.mid;
      let fatherId = "";
      let whoNickname = "";
      let who = "";
      if (item.parentId != "0") {
        fatherId = item.parentId;
        whoNickname = item.nickname;
        who = item.uid;
      } else {
        fatherId = item.id;
        whoNickname = item.nickname;
        who = item.uid;
      }
      this.param = {
        mid,
        parentId: fatherId,
        content: this.editCommentS,
        who,
      };
      this.isFather = false;
      console.log(this.isFather, "isfather");
      this.$refs.inputValF.focus();

      this.placeholder = "回复" + whoNickname;
    },

    // 点击评论框
    getInput() {
      if (this.isFather) {
        let mid = this.message.mid;
        let parentId = "0";
        this.param = {
          mid,
          parentId,
          content: this.editCommentF,
          who: "",
        };
        this.placeholder = "说点什么吧";
      }

      // this.sendFatherComment();
    },

    // 评论框值给参数
    changeInput() {
      this.param.content = this.editComment.trim();
      // console.log(this.param, "input");
    },

    // input框失去焦点初始化
    /*  
     initInputF() {
      this.flag = false;
    },
    initInputS() {
      this.flag = false;
    },
 */
    //获取焦点 father
    /*
    getInputF() {
      this.flag = true;
      this.fatherFlag = true;
      this.sonFlag = false;
    },
    */
    //获取焦点 father
    /*
    getInputS() {
      this.flag = true;
      this.sonFlag = true;
      this.fatherFlag = false;
    },
    */
    //改变input值father
    /* 
    changeInputF() {
      this.paramFather.content = this.editCommentF;
      console.log(this.paramFather);
    },
    */
    //改变input值son
    /*
    changeInputS() {
      this.paramSon.content = this.editCommentS;
      console.log(this.paramSon);
    },
    */

    // 发评论
    async sendComment() {
      if (this.isFather) {
        console.log(this.param);
        let result = await this.$API.reqSendComment(this.param);
        if (result.code == 2000) {
          this.editComment = "";
        }
        // console.log(result);
      } else {
        console.log(this.param, "son");
        let result = await this.$API.reqSendComment(this.param);
        if (result.code == 2000) {
          this.editComment = "";
        }
      }
      this.getAllComments();
    },
    //查看个人信息
    toUserInfo(item) {
      let uid = "";
      if (item.uid) {
        uid = item.uid;
      } else {
        uid = item.me;
      }
      this.$router.push({ name: "myInfo", params: { uid } });
    },
  },
  mounted() {
    this.getAllComments();
  },
  /*
  // created() {
  //   //在页面加载时读取sessionStorage里的状态信息
  //   if (sessionStorage.getItem("store")) {
  //     this.$store.replaceState(
  //       Object.assign(
  //         {},
  //         this.$store.state,
  //         JSON.parse(sessionStorage.getItem("store"))
  //       )
  //     );
  //   }

  //   //在页面刷新时将vuex里的信息保存到sessionStorage里
  //   window.addEventListener("beforeunload", () => {
  //     sessionStorage.setItem("store", JSON.stringify(this.$store.state));
  //   });
  // },
  // beforeDestroy() {
  //   sessionStorage.removeItem("store");
  // },

  */
};
</script>

<style lang="less" scoped>
@font-face {
  font-family: "iconfont"; /* Project id 3753444 */
  src: url("../../assets/font/iconfont.woff2?t=1667742304978") format("woff2"),
    url("../../assets/font/iconfont.woff?t=1667742304978") format("woff"),
    url("../../assets/font/iconfont.ttf?t=1667742304978") format("truetype");
}

.iconfont {
  font-family: "iconfont" !important;
  font-size: 16px;
  font-style: normal;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

.content {
  //   box-sizing: border-box;
  position: relative;
  // -webkit-overflow-scrolling: auto;
  .comments_box {
    .father {
      .header {
        position: relative;
        margin-top: 11px;
        display: flex;
        .zan {
          position: absolute;
          top: 5px;
          right: 5px;
          i {
            font-size: 20px;
          }
          span {
            font-size: 14px;
            color: #9b9b9b;
          }
        }
      }
      .son {
        position: relative;
        margin-top: 11px;
        margin-left: 33px;
        display: flex;

        .zan {
          position: absolute;
          top: 5px;
          right: 0px;
          i {
            font-size: 20px;
          }
          span {
            font-size: 14px;
            color: #9b9b9b;
          }
        }
      }

      .avatar {
        margin: 0px;
        margin-right: 5px;
        /deep/ .el-avatar {
          width: 30px;
          height: 30px;
        }
      }

      .username_message {
        display: flex;
        flex-direction: column;
        height: 60px;
        .username {
          font-size: 14px;
          color: #1ca5fc;
        }
        .comments_content {
          margin-top: 2px;
          font-size: 13px;
          font-weight: 600;
          // margin-left: 5px;
        }
        .time {
          font-size: 12px;
          margin-top: 8px;
          color: #9b9b9b;
          span {
            font-size: 11px;
          }
        }
      }
    }
  }
}
.comment_content {
  margin-top: 10px;
  position: fixed;
  width: 98%;
  bottom: 0;
  .comment_input {
    display: flex;
    input {
      // outline: none;
      width: 77%;
      height: 30px;
    }
  }
}
</style>